{% extends 'admin/common/base.html' %}
{% block css %}
{{super()}}
<link href="{{url_for('admin.static',filename='ajax/libs/jasny/jasny-bootstrap.min.css')}}?v=3.1.3" rel="stylesheet" />
<link href="{{url_for('admin.static',filename='ajax/libs/datapicker/bootstrap-datetimepicker.min.css')}}"
	rel="stylesheet" />
<link href="{{url_for('admin.static',filename='ajax/libs/bootstrap-tagsinput/bootstrap-tagsinput.css')}}?v=3.1.3"
	rel="stylesheet" />
{% endblock %}
{% block body %}

<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form">
			<div class="row">
				<div class="col-md-9">
					<div class="form-group">
						<label class="col-sm-1 control-label">标题：</label>
						<div class="col-sm-11">
							<input class="form-control" type="text" name="title" id="title" value="" required>
						</div>
					</div>

					<div class="form-group">
						<label class="col-sm-1 control-label ">内容：</label>
						<div class="col-sm-11">
							<div class="row center-block" style="margin: 0 0 5px 0;">
								<div class="col-md-10" style="margin: 0px; padding: 0px;">
									网址:<span id="baseURL">http://www.h3blog.com/</span>article/<input name="name"
										style="width: auto!important;border-left: 0!important;border-right: 0!important;border-top: 0!important;">
								</div>
								<div class="col-md-2 text-right" style="margin: 0px; padding: 0px;">
									<a href="{{ request.path + '?editor=tinymce'}}">切换编辑器</a>
								</div>
							</div>
							<textarea id="content_html" name="content_html" class="tinymce-editor"></textarea>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-1 control-label ">概述：</label>
						<div class="col-sm-11">
							<textarea class="form-control" name="summary" id="summary" rows="6"
								maxlength="300"></textarea>
						</div>
					</div>
				</div>
				<div class="col-md-3">

					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">状态：</h3>
						</div>
						<div class="panel-body">
							<select id="state" name="state" class="form-control m-b">
								{% for dd in get_dict_data('cms_article_state')%}
								<option value="{{dd.value}}" {{'selected' if dd.is_default=='Y' else '' }}>{{dd.label}}
								</option>
								{% endfor %}
							</select>
						</div>
					</div>

					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">栏目：</h3>
						</div>
						<div class="panel-body">
							<input type="hidden" name="category_id" id="category_id"
								value="{{category.id if category}}">
							<div class="input-group">
								<input class="form-control" type="text" onclick="selectCategoryTree()"
									value="{{category.title if category}}" id="category_name" readonly="true" required>
								<span class="input-group-addon"><i class="fa fa-search"></i></span>
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">标签</h3>
						</div>
						<div class="panel-body">
							<input class="form-control" type="text" data-role="tagsinput" name="tags" id="tags"
								value="">
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">缩略图：</h3>
						</div>
						<div class="panel-body">
							<div class="thumbnail">
								<input id="thumbnail" name="thumbnail" type="hidden" value="">
								<img id="thumbnail-img" src="/static/img/thumbnail.jpg" class="img-rounded" style="max-height: 300px;">
								<div class="caption">
									<button id="thumbnail-upload-btn" type="button"
                                    class="btn btn-outline-secondary btn-sm">选择图片</button>
								</div>
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">作者</h3>
						</div>
						<div class="panel-body">
							<input class="form-control" type="text" name="author" id="author"
								value="{{current_user.name}}">
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">访问统计</h3>
						</div>
						<div class="panel-body">
							<input class="form-control" type="number" name="vc" id="vc" value="0">
						</div>
					</div>

				</div>
			</div>

			<div class="row">
				<div class="col-sm-offset-5 col-sm-10">
					<button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i
							class="fa fa-check"></i>保
						存</button>&nbsp;
					<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i
							class="fa fa-reply-all"></i>关 闭
					</button>
				</div>
			</div>
		</form>
	</div>

</body>
{% endblock %}
{% block js %}
{{ super() }}
<script src="{{url_for('admin.static',filename='ajax/libs/jasny/jasny-bootstrap.min.js')}}?v=3.1.3"></script>
<script src="{{url_for('admin.static',filename='ajax/libs/tinymce/js/tinymce/tinymce.min.js')}}"></script>
<script src="{{url_for('admin.static',filename='ajax/libs/datapicker/bootstrap-datetimepicker.min.js')}}"></script>
<script src="{{url_for('admin.static',filename='ajax/libs/bootstrap-tagsinput/bootstrap-tagsinput.min.js')}}"></script>
<script src="{{url_for('admin.static',filename='ajax/libs/typeahead/bootstrap-typeahead.js')}}"></script>
<script type="text/javascript">
	var tags_source = {{ get_tags(rtype = 'name') | tojson | safe}};
	$('#tags').tagsinput({
		typeahead: {
			source: tags_source,
			afterSelect: function () {
				this.$element[0].value = '';
			}
		},
		freeInput: true
	});

	$(".dtp").datetimepicker({
		format: 'yyyy-mm-dd HH:ii:ss',
		maxView: "2",
		todayBtn: true,
		autoclose: true,
	})


	$("#form").validate({

	});


	function submitHandler() {
		if ($.validate.form()) {
			tinyMCE.triggerSave();
			// $.operate.save("{{url_for('admin.cms.article.add')}}", $('#form').serialize());
			$.operate.save("{{url_for('admin.cms.article.add')}}", new FormData(document.getElementById('form')), (result) => {
				//$.modal.closeTab();
				if (result.code == web_status.SUCCESS) {
					top.layer.confirm('操作成功', {
						icon: 3,
						title: "系统提示",
						btn: ['关闭', '继续新增']
					}, function (index) {
						$.modal.close(index);
						try {
							var topWindow = $(window.parent.document);
							var currentId = $('.page-tabs-content', topWindow).find('.active').attr('data-panel');
							var $contentWindow = $('.RuoYi_iframe[data-id="' + currentId + '"]', topWindow)[0].contentWindow;
							$.modal.close();
							$contentWindow.$.modal.msgSuccess(result.msg);
							$contentWindow.$(".layui-layer-padding").removeAttr("style");
							if ($contentWindow.table.options.type == table_type.bootstrapTable) {
								$contentWindow.$.table.refresh();
							} else if ($contentWindow.table.options.type == table_type.bootstrapTreeTable) {
								$contentWindow.$.treeTable.refresh();
							}
						} catch (e) { }
						$.modal.closeTab();
					}, function (index) {
						window.location.reload()
					});
				}
			});
		}
	}

	function selectCategoryTree() {
		var treeId = $("#category_id").val();
		var menuId = treeId > 0 ? treeId : 1;
		var url = "{{url_for('admin.cms.category.select_category_tree')}}?id=" + menuId;
		var options = {
			title: '选择栏目',
			width: "380",
			url: url,
			callBack: do_select
		};
		$.modal.openOptions(options);
	}

	function do_select(index, layero) {
		var body = $.modal.getChildFrame(index);
		$("#category_id").val(body.find('#treeId').val());
		$("#category_name").val(body.find('#treeName').val());
		$.modal.close(index);
	}

	//上传图片
	$('#thumbnail-upload-btn').click(function (e) {
		imagehosting('thumbnail-img');
	});

	//调用图床
	var imagehosting_for = "thumbnail-img";
	var tinymce_select_img_callback = null;
	function imagehosting(flag) {
		imagehosting_for = flag;
		layer.open({
			type: 2,
			title: '图片管理',
			shade: 0.8,
			maxmin: true,
			shadeClose: true,
			area: ['80%', '90%'],
			content: '{{url_for("admin.cms.material.image_hosting")}}' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
		});
	}
	//image_hosting.html图床界面调用该函数
	function imagehosting_callback(obj) {
		//缩略图
		if (imagehosting_for === 'thumbnail-img') {
			$('#thumbnail-img').attr('src', obj.img_url);
			$('#thumbnail').val(obj.img_url);
		}
		//编辑器 editor.md
		if (imagehosting_for === 'editor-img') {
			tinymce_select_img_callback(obj.img_url, { alt: obj.img_name });
		}

	}
	// mce编辑器
	tinymce.init({
		selector: '.tinymce-editor',
		language: 'zh_CN',
		//skin:'oxide-dark',
		plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize lineheight formatpainter axupimgs',
		//toolbar: 'code undo redo | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent| bdmap |fullscreen preview',
		toolbar: 'code undo redo restoredraft | forecolor backcolor bold italic underline strikethrough link anchor | preview fullscreen | alignleft aligncenter alignright alignjustify outdent indent | \
                cut copy paste pastetext |styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                    table image media charmap emoticons hr pagebreak insertdatetime print | bdmap indent2em lineheight formatpainter',
		height: 650, //编辑器高度
		// height: 650, //编辑器高度
		min_height: 500,
		/*content_css: [ //可设置编辑区内容展示的css，谨慎使用
			'/static/reset.css',
			'/static/ax.css',
			'/static/css.css',
		],*/
		fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
		font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
		/*link_list: [
			{ title: '预置链接1', value: 'http://www.tinymce.com' },
			{ title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
		], */
		/*image_list: [
			{ title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
			{ title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
		],*/
		convert_urls: false,
		image_class_list: [
			{ title: 'None', value: '' },
			{ title: 'Some class', value: 'class-name' }
		],
		importcss_append: true,
		file_picker_types: 'file image media',
		//自定义文件选择器的回调内容
		file_picker_callback: function (callback, value, meta) {
			if (meta.filetype === 'file') {
				callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
			}
			if (meta.filetype === 'image') {
				imagehosting('editor-img')
				tinymce_select_img_callback = callback;
				// callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
			}
			if (meta.filetype === 'media') {
				callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
			}
		},
		toolbar_sticky: true,
		autosave_ask_before_unload: false,
		fullscreen_native: true,
	});

</script>
{% endblock %}